<template>

  <view>
    <view class="content">
      <image class="logo" src="/static/logo.png"></image>
      <view class="text-area">
        <text class="title">{{detail.key}}</text>
        <indexList></indexList>
      </view>
      <u-button text="按钮"></u-button>

    </view>
    <basics v-if="PageCur=='basics'"></basics>
    <components v-if="PageCur=='component'"></components>
    <plugin v-if="PageCur=='plugin'"></plugin>
    <view class="cu-bar tabbar bg-white shadow foot">
      <view class="action" @click="NavChange" data-cur="basics">
        <view class='cuIcon-cu-image'>
          <image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
        </view>
        <view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
      </view>
      <view class="action" @click="NavChange" data-cur="component">
        <view class='cuIcon-cu-image'>
          <image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
        </view>
        <view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
      </view>
      <view class="action" @click="NavChange" data-cur="plugin">
        <view class='cuIcon-cu-image'>
          <image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
        </view>
        <view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
      </view>
    </view>
  </view>
</template>




<script>
import indexList from '@/components/index/indexList';
export default {
  components: {
    indexList
  },

	data() {
		return {
			ApiUrl: this.$API_URL,
			detail: [],
      PageCur: 'basics'
		}
	},
	onLoad() {
	},
  onShow() {
    this.index()
  },
	methods: {
    index() {
      this.$api('index.index', {
      }).then(res => {
        if (res.code === 200) {
          this.detail = res.data
        } else {
          this.$message.toast(res.msg)//提示
        }
      })
    },

    picList() {
      this.$api('index.picList', {
        id: 12,
        idd: 98,

      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          console.log(res, 'res')
          this.detail = res.data
        } else {
          this.$message.toast(res.msg)//提示
        }
      })
    },

    NavChange: function(e) {
      this.PageCur = e.currentTarget.dataset.cur
    }


	}

}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
